<template>
  <div class="TabControl">
    <ul>
      <li v-for="(item, index) in tabsTitle" :key="index" @click="handleClikc(index)"
        :class="{ active: index === curIndex }">
        {{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const props = defineProps({
  tabsTitle: {
    type: Array,
    default: () => []
  }
})

// 抛出自定义事件
const emits = defineEmits(['clickTab'])
// 当前下标
let curIndex = ref(0)
function handleClikc(index) {
  curIndex.value = index
  emits('clickTab', index)
}

defineExpose({
  curIndex
})
</script>

<style scoped lang="less">
.TabControl {
  ul {
    display: flex;
    overflow-y: auto;

    li {
      padding: 4px 10px;
    }
  }
}

.active {
  border-bottom: 2px solid var(--primary-color);
}
</style>
